<template>
    <div class="box_cont topic_cont flex_column_between"  ref="boxfull">
        <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none"></audio>
        <div class="w-full flex_center_between">
            <img class="back_img cur" @click="backFn" src="@/assets/img/back.png" />
            <h5>{{ mapTitle }}</h5>
            <div></div>
        </div>
        
        <!-- 课程结束倒计时 -->
        <learnTime :timeStr="timeStr" @detection="detection" v-if="learnType == 1"></learnTime>

        <div class="work_cont"> 
            <div class="item cur transition" :class="{active: activedIndex == index, mark: backgroundIndex === index}" v-for="(item, index) in wordsList" :key="index" @click="playAudio(index, item)">
                <div class="cur">  
                    <div style="flex:1;display:flex;align-items:center;justify-content: space-between;margin-right:2.2rem" class="bold">
                        <template v-if="translationShow[index] == 3">
                            '--'
                        </template>

                        <template v-else>
                            {{ item.word }}
                            <span style="font-size:4rem" :style="{ opacity: Number(translationShow[index] || 0) }">{{ item.soundmark }}</span>
                            <span style="font-size:4rem" :style="{ opacity: Number(translationShow[index] == 2) }">{{ item.translation }}</span>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <div class="btn_cont flex_center_between">
            <p class="left_num"> 
                <span class="num1">{{ group }}</span>
                <span class="num2">/{{ totalGroup }}</span>
            </p>
            
            <div class="flex-1 flex justify-end">
                <el-button id="fullscreen_button" style="width: 183px;font-size:2rem;" type="warning" @click="cutboxFn" v-if="isAllStatus.length == words.length">
                    <div class="flex_c_c"><img style="margin-right: 12px;width: 2rem" src="@/assets/img/cut.png" alt=""> 剪纸盒</div> 
                </el-button>
                <el-button id="fullscreen_button" style="width: 183px;font-size:2rem;" type="warning" @click="shuffleArray">
                    <div class="flex_c_c cur"><img style="margin-right: 12px;width: 2rem" src="@/assets/img/random.png" alt=""> 随机</div> 
                </el-button>
                <el-button style="width: 183px;font-size:2rem;" type="primary" @click="playWord">  
                    <div class="flex_c_c cur"><img style="margin-right: 12px;width: 2rem" src="@/assets/img/play.png" alt=""> 播放</div> 
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import learnTime from './components/learntime.vue'

export default {
    components:{
        learnTime
    },
    props: {
        words: {type: Array, default: []},
        group: {type: Number, default: 0},
        totalGroup: {type: Number, default: 0},
        timeStr: {type: String, default: ''},
        learnType: {type: Number, default: 0},
        box: {type: String, default: '0'},
    },
    data() {
        return {
            mapTitle: '单词识记',
            wordsList: [],
            wordPlayStatus: [],
            translationShow: [],
            currentPlayIndex: 0,
            voiceUrl: '',
            isAllStatus: [],
            activedIndex: null,
            backgroundIndex: 1, // 初始位置
            moves: [1, 0, 1, 2, 1, 0, 1, 2, 3, 2, 1, 0, 1, 2, 3, 4, 3, 2, 3, 4, 1, 0, 1, 0, 1, 2, 3, 4, 3, 2, 1, 0], // 标记移动位置
            currentMoveIndex: -1, // 当前移动的索引
        }
    },
    created() {
        this.initData()
    },
    mounted(){},
    methods:{
        initData() {
            this.mapTitle = '单词识记'
            this.wordsList = this.words
            if (this.wordsList.length == 3) {
                this.moves = [1, 0, 1, 2, 1, 0, 1, 2]
            }else if (this.wordsList.length == 4) {
                this.moves = [1, 0, 1, 2, 1, 0, 1, 2, 3, 2, 1, 0, 1, 2, 3]
            }else if (this.wordsList.length <= 2) {
                this.backgroundIndex = -1
            }
        },
        shuffleArray() {
            if (this.wordsList.length <= 1) {
                return
            }
            let newWords = this.wordsList.slice(0);
            for(let i = newWords.length - 1; i > 0; i--){
                const j = Math.floor(Math.random() * (i + 1));
                [newWords[i], newWords[j]] = [newWords[j], newWords[i]];
            }
            if (this.wordsList.length !== 0 && this.arraysEqual(newWords, this.wordsList)) {
                return this.shuffleArray();
            }
            this.wordsList = newWords;
        },
        arraysEqual(a, b) {
            return a.length === b.length && a.every((val, index) => val === b[index]);
        },
        //点击播放
        playAudio(index, word) {
            this.activedIndex = index
            this.moveBackground(index)
            this.wordPlayStatus = []
            if (!this.isAllStatus.length || this.isAllStatus.indexOf(index) == -1) {
                this.isAllStatus.push(index)
            }
            if (this.currentPlayIndex != index) {
                this.translationShow = []
            }
            this.currentPlayIndex = index
            this.translationShow[index] = !this.translationShow[index] || this.translationShow[index] == 3 ? 1 : this.translationShow[index] + 1 
            if (word.voiceFile) {
                this.voiceUrl = word.voiceFile.url
                this.$nextTick(() => {
                    this.$refs.audio.load()
                    this.$refs.audio.play()
                    this.wordPlayStatus[index] = true
                })
                this.$forceUpdate()
            } 
        },
        //顺序播放
        playWord() {
            if (this.activedIndex == null) {
                this.activedIndex = 0
            }else {
                if (this.activedIndex < this.wordsList.length - 1) {
                    this.activedIndex ++
                }else if (this.activedIndex == this.wordsList.length - 1) {
                    this.activedIndex = 0
                }
            }
            let word = this.wordsList[this.activedIndex]
            this.voiceUrl = word.voiceFile.url
            this.$nextTick(() => {
                this.$refs.audio.load()
                this.$refs.audio.play()
            })
        },
        playEnd() {
            this.wordPlayStatus = []
        },
        // 单词标记移动
        moveBackground(clickedIndex) {
            if (this.wordsList.length <= 2) {
                return
            }
            if (this.backgroundIndex === 1 && clickedIndex === 1 && this.currentMoveIndex === -1) {
                this.currentMoveIndex++;
            }
            if (clickedIndex === this.backgroundIndex) {
                if (this.currentMoveIndex < this.moves.length - 1) {
                    this.currentMoveIndex++;
                    this.backgroundIndex = this.moves[this.currentMoveIndex];
                    if (this.currentMoveIndex >= 23 && this.box == 0 && this.wordsList.length == 5) {
                        this.mapTitle = '本组复习'
                    }
                } else {
                    this.backgroundIndex = -1; // 隐藏背景
                    if (this.box == 0 && this.wordsList.length == 5) {
                        this.mapTitle = '听音识词'
                    }
                }
            }
        },
        cutboxFn(){
            this.$emit('changeStep')
        },
        detection(){
            this.$emit('detection')
        },
        backFn(){
            this.$emit('backFn')
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.box_cont{margin-top: -2rem}
.justify-end{padding-left: 2rem}

.po{
    width: 0;
    height: 0;
}

.active{
    background: #F69B2C !important;
    color: #fff !important;
    border-left: 1rem solid #F69B2C !important;
}
.topic_cont{
    text-align: center;
    h5{
        width: 100%;
        font-size: 3.2rem;
        font-weight: normal;
        margin-bottom: 1rem;
        color: #fff;
        // margin-right: 31.7rem;
    }
}



.work_cont{
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    // overflow-y: scroll;
    align-self:baseline;
    box-sizing: border-box;
    // padding: 1rem 20% 0;
    padding: 4rem 71.7rem 0 10rem;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:$background-theme;
    }
    &::-webkit-scrollbar-track { 
        background: #fff;
        border-radius: 5px;
        height:80%;
    }


    
    .item{
        width: 100%;
        min-height: 12rem;
        text-align: left;
        color: #27369C;
        background: #E8EBFF;
        border-radius: 10px;
        margin-bottom: 2rem;
        font-size: 5.4rem;
        
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
       
        border-left: 1rem solid #E8EBFF;

        // padding: 20px 0;
        &:hover{
            background: #F69B2C;
            color: #fff;
            border-left: 1rem solid #F69B2C;

            .text{
                color: #fff;
            }
        }
        .cur{
            padding: 1rem 3.2rem;
        }
        .text{
            font-size: 3.2rem;
            margin-top: 1rem;
        }
        &:last-child{
            margin-bottom: 0px;
        }
    }
    
    .mark {
        border-left: 1rem solid #4FD8E4;
    }
    .status{
        background: #F69B2C;
        color: #fff;
    }

    // &::-webkit-scrollbar {
    //     width: 6px;
    //     height: 1px;
    // }
    // /* 滑块部分 */
    // &::-webkit-scrollbar-thumb { 
    //     border-radius: 5px;
    //     background-color:#019E69;
    // }
    // /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: transparent;
        // border-radius: 5px;
    }

}
.btn_cont{
    width: 100%;
    // padding: 2rem calc(20% + 6px) 0;
    padding: 2rem 71.7rem 0 10rem;
    //border-top: 1px solid #4762BB;
    .left_num{
        margin: auto 0;
        font-size: 3.6rem;
        font-weight: bold;
        .num1{
            color: #FF5252;
        }
        .num2{
            color: #767676;

        }
    }
}
.back_img{
    width: 4rem;
    height: 4rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
    padding: 1rem 71.7rem 0 10rem;
}

</style>
